export default function TodoList({
  todoList,
  onToggleTodoItemStatus,
}: {
  todoList: {
    id: string,
    todoDesc: string,
    isCompleted: boolean,
  }[];
  onToggleTodoItemStatus: (id: string) => void;
}) {
  

  return (
  <div>
    { todoList.map((todo) => {
      return (
        <div key={todo.id}>
          <span>{ todo.todoDesc }</span>
          <span>{ todo.isCompleted ? '完成' : '未完成' }</span>
          <button onClick={() => onToggleTodoItemStatus(todo.id)}>反转</button>
        </div>
      )
    })}

  </div>)
}